<template>
  <div
    class="workbenchs_body"
    style="position:relative;"
  >
    <div class="body_top_bg"></div>
    <div class="header">
      <div
        class="header_title"
        v-if="list.Badge !== ''"
      >
        <img
          :src="Badge.logo"
          style="width:100%;height:100%"
        />
        <span
          style="position:relative;top:-24.5px;font-size:15px;font-weight:400"
          @click="goMyB"
        >{{list.BadgeNum}}</span>
      </div>
      <div
        class="header_title"
        v-else
      >
        <div class="touWrap">
          <img
            src=""
            alt=""
            style="width:100%;height:100%;border:none"
          >
          <span
            v-if="name.length < 3"
            style="position:absolute;left:50%;top:50%;transform: translate(-50%,-70%);width:100px"
          >
            {{((name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
          </span>
          <span
            v-if="name.length >= 3"
            style="position:absolute;left:50%;top:50%;transform: translate(-50%,-70%);width:100px"
          >
            {{((name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
          </span>
        </div>
        <!-- style="width:100%;height:100%"/> -->
        <span
          style="position:relative;top:-24.5px;font-size:10px;font-weight:400"
          @click="goMyB"
        ></span>
      </div>
      <div
        class="header_content"
        style="font-size:15px;"
      >
        <article class="header_top">
          <span class="header_top_left">{{list.name}}</span>
          <span
            style=" color:#808080"
            v-if='list.dingding_office_name == null'
          > {{list.dingding_office_name}} </span>
        </article>
        <div style="margin-top:10px">
          <div style="display:inline-block;text-align:center">
            <article
              class="fonts"
              style="padding-bottom:10px;"
            >{{parseInt(list.code_b).toLocaleString()}}</article> <span class="fontsmall">累计{{D_name}}</span>
          </div>
          <div
            style="display:inline-block;margin-left:30px;text-align:center"
            v-if="list.is_first==1 || list.is_first == 3"
          >
            <article
              class="fonts"
              style="padding-bottom:10px;"
            >{{D_name}}
              ± {{list.upperLimitD}}</article><span class="fontsmall">奖扣权限</span>
          </div>
        </div>
      </div>
      <div
        class="right"
        style="position:absolute;top:30px;right:0px;font-size:12px;width:55px;height:25px ;"
        v-if="list.Level !== ''"
      >
        <!-- <img  :src="Level.logo" alt="" style="width:100%;height:100%;border-radius: 10px 0 0 10px; "/>  -->
        <span
          class="rightright"
          style="position: relative;width: 42px;height: 10px;top:0px; color:#fff"
        >{{Level.name}}</span>
      </div>
      <div
        style="position:absolute;top:30px;right:0px;font-size:12px;width:55px;height:25px ;"
        v-else
      >
        <!-- <img  :src="Level.logo" alt="" style="width:100%;height:100%;border-radius: 10px 0 0 10px; "/>  -->
        <span
          class="rightright"
          style="position: relative;width: 42px;height: 10px;top:-23px; color:#fff"
        ></span>
      </div>
    </div>
    <!--通知消息-->
    <van-notice-bar
      :left-icon="icon.xx"
      color="#242424"
      class="van_bar"
      :text="textdata"
      v-if="Notice !== false"
    >
      <!-- <span style="font-weight:500;margin-right:10px" >消息 </span> -->
      <span style="font-weight:400">{{textdata}}</span>
    </van-notice-bar>
    <div class="list_wrap">
      <div
        class="prize_clasp_wrap"
        v-for="item in endList"
        :key="item.id"
        @click="goDetails(item.id,$event.target.className )"
        v-html='listContentMap[item.id]'
      >
      </div>
    </div>
    <!-- 轮播 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div
            v-show="ISC == 1"
            class="item_wrap"
          >
            <p style="text-align:center"><span style="margin-left:-20%">{{C_name}}排名</span></p>
            <div>
              <div style="float:left;margin-left:10px">
                <font>第<strong style="font-size:20px">{{C.deep}}</strong>名</font><br>
                <span><i style="width:10px;height:10px;float:left"><img
                      style="width:100%;height:100%"
                      src="@/static/workBench/C_name.jpg"
                      alt=""
                    ></i>{{C.code_b}}</span>
              </div>
              <div style="font-size:12px;color:#242424;float:right;margin-top:-10px;width:50%;text-align:left;">
                <span style="display: inline-block;padding: 2px;">事件: <span>{{C.eventType}}</span></span><br>
                <span style="display: inline-block;padding: 2px;">时间: <span>{{C.rankType}}</span></span><br>
                <span style="display: inline-block;padding: 2px;">部门: <span>{{C.officeName}}</span></span>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="item_wrap">
            <p style="text-align:center"><span style="margin-left:-20%">{{D_name}}排名</span></p>
            <div>
              <div style="float:left;margin-left:20px">
                <font>第<strong style="font-size:20px">{{D.deep}}</strong>名</font><br>
                <span><i style="width:10px;height:10px;float:left"><img
                      style="width:100%;height:100%"
                      src="@/static/workBench/D_icon.png"
                      alt=""
                    ></i>{{D.code_b}}</span>
              </div>
              <div style="font-size:12px;color:#242424;float:right;margin-top:-10px;width:50%;text-align:left;">
                <span style="display: inline-block;padding: 2px;">事件:<span>{{D.eventType}}</span></span><br>
                <span style="display: inline-block;padding: 2px;">时间:<span>{{D.rankType}}</span></span><br>
                <span style="display: inline-block;padding: 2px;">部门:<span>{{D.officeName}}</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!--更多统计-->
    <div class="statistical">
      <van-cell
        to="/statistics"
        style="padding: 10px 10px 10px 0px;"
      >
        <div style="height:26px;">
          <div style="height:12px;padding:8px 0px;font-size:12px;">
            <van-icon
              :name="icon.tj"
              style="float:left;padding:5px 0px"
            />
            <span style="marigin:0 0 0 20px;float:left">更多统计</span>
            <span style="float:right">更多</span>
          </div>
        </div>
      </van-cell>
      <van-grid
        :border="false"
        :column-num="3"
        class="grid"
      >
        <van-grid-item to="/rankingChange">
          <img src="@/static/workBench/paiming_icon@2x.png" />
          <span>排名变化</span>
        </van-grid-item>
        <van-grid-item to='/integralChange'>
          <img src="@/static/workBench/jifen_icon@2x.png" />
          <span>积分变化</span>
        </van-grid-item>
        <van-grid-item to="/progress">
          <img src="@/static/workBench/jinbu_icon@2x.png" />
          <span>进步变化</span>
        </van-grid-item>
        <van-grid-item to="/personaldata">
          <img src="@/static/workBench/shujv_icon@2x.png" />
          <span>个人数据</span>
        </van-grid-item>
        <van-grid-item to='/TaskStatistics'>
          <img src="@/static/workBench/jiangkou_icon@2x.png" />
          <span>奖扣任务统计</span>
        </van-grid-item>
        <van-grid-item to='/fabulous'>
          <img src="@/static/workBench/dianzan_icon@2x.png" />
          <span>点赞数统计</span>
        </van-grid-item>
      </van-grid>
    </div>
    <Plus />
  </div>
</template>
<script type="text/javascript">
import Swiper from "swiper";
import { NoticeBar, Grid, GridItem, Icon, NavBar, Cell, Switch } from "vant";
import Plus from "@/components/plus";
import { getHtml } from "./index.js";
export default {
  data() {
    return {
      endList: [],
      listContentMap: {},
      list: {
        name: "-",
        code_b: "0",
        myPoints: {
          target: 0
        }
      },
      name: "",
      Badge: {},
      Level: {},
      target: 0,
      icon: {
        xx: require("@/static/workBench/xiaoxi.png"),
        tj: require("@/static/workBench/tongji_icon@2x.png"),
        dot: require("@/static/workBench/timeout_Reddot.png"),
        su: require("@/static/workBench/Setup@2x.png"),
        un: require("@/static/workBench/unfold.png")
      },
      C_name: "",
      D_name: "",
      textdata: "",
      Notice: false,
      ranking: [],
      C: {},
      D: {},
      ISC: ""
    };
  },
  created() {
    this.getNotice();
    this.onClassify();
    this.getUserId();
    this.getIsC();
    dd.biz.navigation.setTitle({
      title: "工作台" //控制标题文本，空字符串表示显示默认文本
    });
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      slidesPerView: 1.3,
      spaceBetween: 10,
      centeredSlides: true,
      initialSlide: 1,
      pagination: {
        el: ".swiper-pagination"
      },
      loop: false
    });
  },
  beforeUpdate() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
  },
  methods: {
    //C分开关
    async getIsC() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(`yuepoints/getIsC?corpId=${corpId}`);
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code;
    },
    // 自定义名称存储
    async getCustomName() {
      // let corpId = this.$utils.getUrlKey("custid");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getCustomName?corpId=${corpId}`
      );
      if (res.data.errcode == "0000") {
        if (res.data.data.c_name == "") {
          localStorage.setItem("c_name", "C分");
        } else {
          localStorage.setItem("c_name", res.data.data.c_name);
        }
        if (res.data.data.d_name == "") {
          localStorage.setItem("d_name", "D分");
        } else {
          localStorage.setItem("d_name", res.data.data.d_name);
        }
      } else {
        localStorage.setItem("c_name", "C分");
        localStorage.setItem("d_name", "D分");
      }
    },
    async getUserId() {
      let Corp_Id = localStorage.getItem("custid");
      let User_Id = localStorage.getItem("userId");
      let corpId = this.$utils.getUrlKey("custid");
      if (corpId == null || corpId == "undefined") {
        corpId = Corp_Id;
      } else {
        localStorage.setItem("custid", corpId);
      }

      let code = "";
      var _this = this;
      if (User_Id && User_Id != "undefined" && User_Id != null) {
        if (Corp_Id != corpId) {
          await dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: function(result) {
              code = result.code;
            },
            onFail: function(err) {}
          });
          _this.$http
            .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
            .then(res => {
              localStorage.setItem("userId", res.data.data.dd_id);
              localStorage.setItem("custid", corpId);
              _this.getCustomName();
              _this.getWorkbench();
              _this.focusOnRanking();
            });
        } else {
          _this.getCustomName();
          _this.getWorkbench();
          _this.focusOnRanking();
        }
      } else {
        await dd.runtime.permission.requestAuthCode({
          corpId: corpId,
          onSuccess: function(result) {
            code = result.code;
          },
          onFail: function(err) {}
        });
        _this.$http
          .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
          .then(res => {
            localStorage.setItem("userId", res.data.data.dd_id);
            localStorage.setItem("custid", corpId);
            _this.getCustomName();
            _this.getWorkbench();
            _this.focusOnRanking();
          });
      }
    },
    //任务和事件
    //获取工作台数据
    async getWorkbench() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/Workbench?corpId=${corpId}&userId=${userId}`
      );
      // 不可用人员跳转页面
      if (res.data.errcode == "1001") {
        this.$router.push({
          //核心语句
          path: "/",
          query: {
            prohibit: 1
          }
        });
      }
      this.list = res.data.data;
      this.name = this.list.name;
      this.Badge = this.list.Badge;
      this.Level = this.list.Level;
      let target = localStorage.getItem("num");
      if (target == undefined || target == 0 || target == null) {
        if (this.list.myPoints == undefined || this.list.myPoints == null) {
          let endList = localStorage.getItem("endlist");
          endList = JSON.parse(endList);
          if (!endList) {
            this.getTableSetting();
          } else {
            //筛选出为true
            const trueList = endList.filter(item => {
              return item.switch === true;
            });
            trueList.forEach((item, index) => {
              this.listContentMap[item.id] = getHtml(item.id, this.list);
            });
            this.endList = trueList;
          }
        } else {
          this.list.myPoints.target = this.target;
          let endList = localStorage.getItem("endlist");
          endList = JSON.parse(endList);
          if (!endList) {
            this.getTableSetting();
          } else {
            //筛选出为true
            this.list.myPoints.target = this.target;
            const trueList = endList.filter(item => {
              return item.switch === true;
            });
            trueList.forEach((item, index) => {
              this.listContentMap[item.id] = getHtml(item.id, this.list);
            });
            this.endList = trueList;
          }
        }
      } else {
        //设置目标分数后的操作
        let target = localStorage.getItem("num");
        this.target = JSON.parse(target);
        let endList = localStorage.getItem("endlist");
        endList = JSON.parse(endList);
        if (this.list.myPoints == undefined) {
          if (!endList) {
            this.getTableSetting();
          } else {
            //筛选出为true
            const trueList = endList.filter(item => {
              return item.switch === true;
            });
            trueList.forEach((item, index) => {
              this.listContentMap[item.id] = getHtml(item.id, this.list);
            });
            this.endList = trueList;
          }
        } else {
          this.list.myPoints.target = this.target;
          let endList = localStorage.getItem("endlist");
          endList = JSON.parse(endList);
          if (!endList) {
            this.getTableSetting();
          } else {
            //筛选出为true
            const trueList = endList.filter(item => {
              return item.switch === true;
            });
            trueList.forEach((item, index) => {
              this.listContentMap[item.id] = getHtml(item.id, this.list);
            });
            this.endList = trueList;
          }
        }
      }
    },
    //获取设置页数据并筛选用户的权限
    //来判断默认页的排序
    async getTableSetting() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId =  this.$utils.getUrlKey("custid");
      const res = await this.$http
        .get(`yuepoints/tableSetting?corpId=${corpId}&userId=${userId}`)
        .then(res => {
          this.endList = res.data.data.tableSetting;
          const trueList = this.endList.filter(item => {
            return item.is_show === true;
          });
          this.endList = trueList;
          trueList.forEach((item, index) => {
            this.listContentMap[item.id] = getHtml(item.id, this.list);
          });
          this.endList = trueList;
        })
        .catch(error => {
          console.log("message");
        });
    },
    //获取排名数据
    async focusOnRanking() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/focusOnRanking?corpId=${corpId}&userId=${userId}`
      );
      this.ranking = res.data.data;
      this.C = this.ranking[1].C;
      this.D = this.ranking[0].D;
    },
    //跳转徽章
    goMyB() {
      this.$router.push({
        //核心语句
        path: "/myBadge", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          name: this.list.name
        }
      });
    },
    //跳转各个模块
    goDetails(key, e) {
      switch (key) {
        case 1:
          this.$router.push({ path: "/integral" });
          break;
        case 2:
          this.$router.push({ path: "/rewardPunishment" });
          break;
        case 4:
          this.$router.push({ path: "/record" });
          break;
        case 5:
          this.$router.push({ path: "/task" });
          break;
      }
      switch ((key, e)) {
        case (3, "event"):
          this.$router.push({ path: "/toExamine" });
          break;
        case (3, "events"):
          this.$router.push({ path: "/toExamine" });
          break;
        case (3, "task"):
          this.$router.push({ path: "/task", query: { active: 2 } });
          break;
        case (3, "task1"):
          this.$router.push({ path: "/task", query: { active: 2 } });
          break;
        case (3, "tasks"):
          this.$router.push({ path: "/task", query: { active: 3 } });
          break;
      }
    },
    //消息广播
    async getNotice() {
      const res = await this.$http.get(`yuepoints/Notice`);
      const {
        data: { data, errcode }
      } = res;
      if (errcode === "0000") {
        this.Notice = true;
        this.textdata = data.notice_content;
      }
    },
    //钉钉菜单右侧设置方法
    onClassify() {
      let _this = this;
      dd.biz.navigation.setMenu({
        backgroundColor: "#DC143C",
        textColor: "#ADD8E611",
        items: [
          {
            id: "1",
            iconId: "type",
            text: "设置",
            url: "https://yjfisvtest.changyuelife.com/static/set.png"
          }
        ],
        onSuccess: function(res) {
          if (res.id == 1) {
            _this.$router.push({
              //核心语句
              path: "/Setup" //跳转的路径
            });
          }
        },
        onFail: function(err) {}
      });
    }
  },
  components: {
    [NoticeBar.name]: NoticeBar,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    Swiper,
    Plus
  }
};
</script>
<style lang="less" scoped>
@import "../../../node_modules/swiper/css/swiper.css";
/deep/li {
  list-style: none;
}
/deep/.cell {
  background: #ccc;
  height: 75px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 0.12rem 0.05333rem 0 rgba(0, 42, 105, 0.05);
  border-radius: 5px;
}
.van-cell:not(:last-child)::after {
  border-bottom: 0px;
}
.van-cell__value {
  text-align: center;
}
.prize_clasp_wrap {
  height: 75px;
  margin: 10px;
}
.van_bar {
  margin: 10px;
  padding: 0 5px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4.5px 2px 0px rgba(0, 42, 105, 0.05);
  border-radius: 5px;
  font-size: 11px;
}
.workbenchs_body {
  padding-bottom: 70px;
  background: rgba(248, 248, 250, 1);
  margin-bottom: 50px;
  .wrapper {
    touch-action: pan-y !important;
  }
  .body_top_bg {
    float: left;
    width: 100vw;
    height: 135px;
    background: linear-gradient(
      0deg,
      rgba(248, 248, 250, 1) 33%,
      rgba(92, 151, 246, 1) 100%
    );
  }
  .header {
    position: relative;
    margin: 0px 10px 5px;
    height: 135px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4.5px 2px 0px rgba(0, 42, 105, 0.05);
    border-radius: 5px;
    .header_title {
      position: absolute;
      top: 20px;
      left: 27px;
      width: 76px;
      height: 84px;
      .touWrap {
        width: 76px;
        height: 84px;
        color: #fff;
        font-size: 20px;
      }
    }
    .header_content {
      position: absolute;
      top: 36px;
      left: 127.5px;
      text-align: left;
      .header_top {
        display: inline;
        .header_top_left {
          width: 43px;
          height: 14px;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
        }
        .header_top_right {
          width: 53.5px;
          height: 14.5px;
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(128, 128, 128, 1);
        }
      }
      .header_button {
        display: inline-block;

        .button_left {
          float: left;
        }
        .button_right {
          float: left;
          margin-left: 30px;
        }
      }
    }
  }
  .right {
    float: right;
    width: 55px;
    height: 25px;
    background-image: url("../../static/workBench/huizhangdi@2x.png");
    background-size: 100% 100%;
    line-height: 25px;
    align-items: center;

    .rightright {
      position: absolute;
      top: -20px;
      font-size: 11px;
      color: #fff;
    }
  }
  .fonts {
    height: 18px;
    font-size: 20px;
    font-family: Helvetica Neue;
    font-weight: bold;
    color: rgba(36, 36, 36, 1);
  }
  .fontsmall {
    height: 10.5px;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(36, 36, 36, 1);
  }
  .statistical {
    margin: 10px;
    height: 163px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4.5px 3px 0px rgba(0, 42, 105, 0.05);
    border-radius: 5px;
  }

  .grid {
    margin: 0 auto;
    height: 133px;
    img {
      height: 35px;
    }
    span {
      margin-top: 5px;
      font-size: 11px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(36, 36, 36, 1);
    }
  }
  /deep/.integral_wrap {
    height: 75px;
    padding-top: 3px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4.5px 2px 0px rgba(0, 42, 105, 0.05);
    border-radius: 5px;
    .integral_content {
      font-size: 12px;
      font-weight: 500px;
      text-align: left;
      .van-icon {
        width: 10px;
        height: 20px;
      }
    }
    .flex_wrap {
      display: flex;
      // margin-top: 10px;
      // flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      font-size: 12px;
      .fontWrap {
        display: inline-block;
        margin: 0 0 6px 0;
      }
      .items {
        width: 20vw;
        padding: 10px 0;
      }
      .item {
        width: 25vw;
        padding: 10px 0;
      }
      font {
        color: #17c78c;
      }
      .redfont {
        color: #e60000;
      }
    }
  }
  /deep/.redfont {
    color: #e60000;
  }
  //  轮播
  .swiper-container {
    width: 100%;
    z-index: 0;
  }
  .swiper-slide {
    width: 300px;
    height: 105px;
    text-align: center;
    font-size: 12px;
    border-radius: 5px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    overflow: hidden;
  }
  .item_wrap {
    position: absolute;
    right: 3%;
    height: 105px;
    width: 80%;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0px;
    left: 0px;
    width: 100%;
  }
  .margin_left {
    margin-left: 70px;
  }
  /deep/.examine {
    display: flex;
    margin-top: 10px;
    .fontWrap {
      display: inline-block;
      margin: 0 0 6px 0;
    }
    .event {
      display: flex;
      flex: 1;
      font-size: 12px;
      justify-content: space-around;
    }
    .task {
      display: flex;
      flex: 1;
      font-size: 12px;
      justify-content: space-around;
    }
  }
}
</style>